<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="row">
        <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>水表抄表率统计</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-line-chart"></div>
            </div>
        </div>
    </div>
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>水表用量分析</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
	</div>
    <th:block th:include="include :: footer" />

    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
        $(function () {
            // 水表抄表率统计
            var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
            var lineoption = {
                title: {
                    text: '2020年4月份'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['成功', '失败']
                },
                grid: {
                    x: 40,
                    x2: 40,
                    y2: 24
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1号', '3号', '5号', '7号', '9号', '11号', '13号', '15号', '17号', '19号', '21号', '23号','25号', '27号', '29号', '31号']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} '
                        }
                    }
                ],
                series: [
                    {
                        name: '成功',
                        type: 'line',
                        data: [0.9, 0.6, 0.6, 0.4,0.5,0.1, 0.2, 0.8,1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '失败',
                        type: 'line',
                        data: [0.1, 0.4, 0.4, 0.6, 0.5, 0.9, 0.8, 0.2, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        markPoint: {
                            data: [
                                {name: '月最低', value: 0, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);

            // 水表用量分析
            var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
            var baroption = {
                title: {
                    text: '2020年4月份'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['用水量']
                },
                grid: {
                    x: 30,
                    x2: 40,
                    y2: 24
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['1号', '3号', '5号', '7号', '9号', '11号', '13号', '15号', '17号', '19号', '21号', '23号', '25号', '27号', '29号', '31号']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '用水量',
                        type: 'bar',
                        data: [22.0, 42.9, 7.0, 23.2, 25.6, 76.7, 35.6, 162.2, 32.6, 20.0, 62.4, 31.3, 23.2, 25.6, 76.7,100],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            barChart.setOption(baroption);

            window.onresize = barChart.resize;
        });
    </script>
</body>
</html>
